<template>
  <div class="mine">
    <van-nav-bar title="我的" fixed />
    
    <!-- 用户信息卡片 -->
    <div class="user-card">
      <van-image
        round
        width="80"
        height="80"
        src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
      />
      <div class="user-info">
        <h3>用户名</h3>
        <p>ID: 888888</p>
      </div>
    </div>

    <!-- 功能列表 -->
    <van-cell-group>
      <van-cell title="我的订单" is-link icon="orders-o" />
      <van-cell title="我的收藏" is-link icon="star-o" />
      <van-cell title="我的地址" is-link icon="location-o" />
      <van-cell title="联系客服" is-link icon="service-o" />
      <van-cell title="设置" is-link icon="setting-o" />
    </van-cell-group>
  </div>
</template>

<script setup>
import { Image as VanImage, CellGroup, Cell } from 'vant'
</script>

<style scoped>
.mine {
  padding-top: 46px;
  padding-bottom: 50px;
  background: #f7f8fa;
}

.user-card {
  margin: 10px;
  padding: 20px;
  background: #fff;
  border-radius: 8px;
  display: flex;
  align-items: center;
}

.user-info {
  margin-left: 20px;
}

.user-info h3 {
  margin: 0;
  font-size: 18px;
}

.user-info p {
  margin: 5px 0 0;
  color: #999;
  font-size: 14px;
}
</style> 